// 案例1：实现隔行换色功能
let ali = document.querySelectorAll('li')
for(let i =0;i<ali.length;i++){
    if(i%2==0){
        ali[i].style.color = "green"
    }else{
     ali[i].style.color = "red"
    }
}
// 案例2：实现在htm了页面中显示格式YYYY-MM-DD日期
// 要求：利用moment插件实现日期格式化
// let h1 = document.querySelector('h1')
// let curDate = new Date()
// 格式化日期 下载npm i moment  然后引入
// 注意：html页面不能直接引用该js文件，因为浏览器还不支持es6的import form的语法
// 因此我们需要打包文件，然后引入打包后js文件
import moment from "moment"
curDate = moment(curDate).format("YYYY-MM-DD")
// 设置显示的日期
h1.innerHTML = "当前日期：" + curDate

// 总结：打包后的插件是如何能够生效？答：因为打包的时候会把插件一起打包到dist/main.js中

// 引入css样式，让webpack进行打包
// 引入样式的es6语法：import css文件路径
import "./css/index.css"

// 引入less，让webpack进行打包
import "./less/index.less"

// 引入图片 让webpack打包
// 默认情况下 webpack不能处理图片
import logo from './assets/logo_small.png' 
let img = document.createElement("img") // 创建img标签
img.src = logo // 设置图片路径
document.body.appendChild(img) // 将img标签插入到body元素里面去


// 引入字体图标样式 让webpack打包
import './assets/fonts/iconfont.css'
let i = document.createElement('i')
i.className = "iconfont icon-qq"
document.body.appendChild(i)

// 写一个箭头函数，测试语法降级处理
const test = ()=>{
    console.log(888);
}
console.log(test)

/**
 * 
 * 模块化开发
 * 所有的第三方模块我都不需要像之前那样通过script标签使用，而是
 * 通过es6的模块化方式引入使用插件。
 * 
 * */ 